<template>
  <div class="app-container home"  >
    <div class="hah">哈哈哈哈</div>
    <!-- <el-button v-hasPermi="['system:menu:query']" type="primary"
      >Primary</el-button
    > -->

    <xpButton
      ref="xpbutton"
      @click="goToMap"
      v-hasPermi="['system:menu:query']"
      :round="false"
    >
      这是内容
    </xpButton>

    <vxe-toolbar ref="toolbarRef" custom>
      <template #buttons>
        <xpButton
          ref="xpbutton"
          @click="goToMap"
          v-hasPermi="['system:menu:query']"
          style="margin-right: 10px"
          :round="false"
        >
          按钮
        </xpButton>
        <xpButton
          ref="xpbutton"
          @click="goToMap"
          v-hasPermi="['system:menu:query']"
          :round="false"
        >
          内容
        </xpButton>
      </template>
    </vxe-toolbar>

    <!-- <vxe-table
    id="myCustomUpdate"
    ref="tableRef"
    :column-config="{resizable: true}"
    :custom-config="customConfig" 
    :row-config="{isCurrent:true}"
    @edit-closed="editClosed"
    :edit-config="{ trigger:'dblclick', mode: 'cell' }"
    :data="tableData">
    <vxe-column type="seq" width="70"></vxe-column>
    <vxe-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-column>
    <vxe-column field="sex" title="Sex" :edit-render="{name: 'input'}"></vxe-column>
    <vxe-column field="age" title="Age" :edit-render="{name: 'input'}"></vxe-column>
    <vxe-column field="adress" title="adress" :edit-render="{name: 'input'}"></vxe-column>
  </vxe-table> -->

    <vxeTable
      :border="true"
      tableRef="tableRef"
      :columnConfig="columnConfig"
      :columnData="columnData"
      :rowConfig="rowConfig"
      :editConfig="{ trigger: 'dblclick', mode: 'cell', showIcon: false }"
      :tableData="tableData"
      @editClose="editClose"
      :resizableConfig="resizableConfig"
    />
  </div>







</template>

<script setup name="Index">
import { ref, nextTick, reactive, onMounted } from "vue";
import vxeTable from "@/components/vxeTable/vxeTable.vue";
const { proxy } = getCurrentInstance();
const tableRef = ref();
const toolbarRef = ref();
const tableData = ref([
  { id: 1, name: "Test1", role: "Develop", sex: "Man", age: 28 },
  { id: 2, name: "Test2", role: "Test", sex: "Women", age: 22 },
  { id: 3, name: "Test3", role: "PM", sex: "Man", age: 32 },
  { id: 4, name: "Test4", role: "Designer", sex: "Women", age: 24 },
]);
const columnConfig = ref({
  resizable: true,
});
const resizableConfig = ref({ minWidth: "100px" });
const rowConfig = ref({ isCurrent: true });
const columnData = reactive([
  { type: "checkbox", width: "50" },
  { field: "id", title: "编号", width: "80" },
  { field: "name", title: "名称", editRender: { name: "input" } },
  { field: "sex", title: "性别", editRender: { name: "input" } },
  { field: "age", title: "年龄", editRender: { name: "input" } },
  { field: "role", title: "地址", editRender: { name: "input" } },
]);
const saveCustomSetting = (storeData) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(storeData);
      resolve();
    }, 200);
  });
};
const goToMap = async() => {
  window.errorMessageOpen(
    "哈哈哈",
    "稍等哈范德萨发生。\r\n大发大舒服舒服大是大非是。\r\n大发大舒服舒服大是大非是。\r\n大发大舒服舒服大是大非是。\r\n大发大舒服舒服大是大非是。\r\n大发大舒服舒服大是大非是。\r\n大发大舒服舒服大是大非是。\r\n大发大舒服舒服大是大非是。\r\n大发大舒服舒服大是大非是。\r\n大发大舒服舒服大是大非是。\r\n大发大舒服舒服大是大非是。\r\n大发大舒服舒服大是大非是。\r\n大发大舒服舒服大是大非是"
  );
};
const customConfig = reactive({
  storage: true,
  updateStore({ storeData }) {
    // 模拟异步，实现服务端保存
    return saveCustomSetting(storeData);
  },
});

const editClosed = (event) => {
  console.log(event);
  console.log(event.row);
};

const editClose = (data) => {
  console.log(data, "这是编辑成功后的数据");
};

onMounted(() => {
  const $table = tableRef.value;
  const $toolbar = toolbarRef.value;
  if ($table && $toolbar) {
    $table.connect($toolbar);
  }
});
</script>

<style scoped lang="scss">
.hah {
  font-size: var(--size);
  color: var(--el-color-primary);
}
</style>

